<template>

  <body id="login-page" align="center">

  <div>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="login-container" el-form label-position="left" label-width="0px">
      <h3 class="login_title">用户注册</h3>
      <el-form-item auto-complete="off" prop="name" required>
        <el-input v-model="ruleForm.name" placeholder="真实姓名"></el-input>
      </el-form-item>

      <el-form-item prop="account" required>
        <el-input
            v-model="ruleForm.account"
            auto-complete="off"
            placeholder="账号"
            @blur="checkAccout"></el-input>
      </el-form-item>

      <el-form-item auto-complete="off" prop="password" required>
        <el-input v-model="ruleForm.password" placeholder="密码" show-password></el-input>
      </el-form-item>

      <el-form-item  auto-complete="off" prop="connection" required>
        <el-input v-model="ruleForm.connection"placeholder="联系方式"></el-input>
      </el-form-item>

      <el-form-item auto-complete="off" prop="typeid" required>
        <el-select v-model="ruleForm.typeid" placeholder="请选择注册类型">
          <el-option label="云工厂管理员" value=1></el-option>
          <el-option label="经销商" value=2></el-option>
        </el-select>
      </el-form-item>


      <div v-if='ruleForm.typeid==1' required>
        <el-form-item auto-complete="off" prop="factoryname">
          <el-input
              v-model="ruleForm.factoryname"
              placeholder="工厂名"
              @blur="checkFactoryname"></el-input>
        </el-form-item>

        <el-form-item auto-complete="off" prop="description">
          <el-input
              v-model="ruleForm.description"
              placeholder="在这里输入你的工厂简介"
              type="textarea"></el-input>
        </el-form-item>
      </div>


      <el-form-item style="width: 100%">
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-link href="http://localhost:8080/" type="primary">返回登录</el-link>
      </el-form-item>

    </el-form>
  </div>
  </body>
</template>

<script>
export default {
  name: "Regester",
  data() {
    return {
      ruleForm: {
        name: '',
        account: '',
        password: '',
        typeid:'',
        connection:'',
        factoryname:'',
        description:''
      },
      rules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '账号不能为空', trigger: 'change' }
        ],
        typeid:[
          { required: true, message: '必须选择一个类型', trigger: 'change' }
        ],
        password:[
          { required: true, message: '密码不能为空', trigger: 'change' },
          { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
        ],
        connection:[
          { required: true, message: '联系方式不能为空', trigger: 'change' }
        ],
        description: [
          {max:200,message:'最多不超过200个字符',trigger: 'change'}
        ],
        factoryname:[
          { required: true, message: '工厂名不能为空', trigger: 'change' }
        ]
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('http://localhost:8081/signup',this.ruleForm).then((response)=>{
            if(response.data != null){
              this.success();
              this.$router.push("/");
            }else{
              this.failed();
            }
          })
        } else {
          this.failed();
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    success() {
      this.$message({
        message: '注册成功，正在跳转回登录界面!',
        type: 'success'
      });
    },
    failed() {
      this.$message.error('注册失败，请检查内容是否正确或稍后再试!');
    },checkAccout(){
      axios.post('http://localhost:8081/checkAccout/'+this.ruleForm.account).then((response)=>{
        if(response.data == 1){
          this.$message({
            message: '该用户名已被使用!',
            type: 'error'
          });
        }else{
          this.$message({
            message: '恭喜，用户名可用!',
            type: 'success'
          });
        }
      })
    },checkFactoryname(){
      axios.post('http://localhost:8081/checkFactoryname/'+this.ruleForm.factoryname).then((response)=>{
        if(response.data == 1){
          this.$message({
            message: '该工厂名已被使用!',
            type: 'error'
          });
        }else{
          this.$message({
            message: '恭喜，工厂名名可用!',
            type: 'success'
          });
        }
      })
    }
  }
};
</script>

<style scoped>
#login-page {
  background: url("../../assets/img/bg.jpg") no-repeat center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
body {
  margin: 0px;
}
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>